//该文件用于创建整个应用的路由器
import VueRouter from "vue-router"

import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import Detail from '../pages/Detail.vue'

//创建一个路由器
const router = new VueRouter({
    /*
    路由器有两个工作模式hash模式和history，默认工作在hash模式
    （hash模式是指浏览器路径为http://域名/#/aa/bb，#后面的路径/aa/bb被称为hash值，hash值不会在http请求中传递给后端服务器
    对于后端服务器而言，例如请求 https://www.baidu.com/#/aa/bb/cc 和请求https://www.baidu.com 是同一个资源）
    (history模式路径中不包含#，但history默认的路径在页面刷新时会被全部带到后端服务器，如果后端服务没有对相关路径进行处理，会显示404)

    vue项目部署上线时，需要用 npm run build 编译打包出dist文件夹，部署到nginx服务器上
    hash模式部署时一般不会有404问题；而history模式在nginx中部署时，常用try_files配置项解决404问题；此外nodejs和java服务器也有相应各自的解决方法
    # 部署vue的dist的路径配置，
    location / {
        root html/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    */
    mode: 'history', //设置路由器工作模式为history
    routes: [ //配置每一组路由规则
        {
            name: 'guanyu', //命名路由，给这个路由起个名字叫guanyu，跳转时可以用名字代替路径
            path: '/about', //一级路由 路径
            component: About, //路径所展示的组件实例
            meta: { //在meta中可以配置一些自定义属性，路由组件内通过$route.meta.xx可以获取到
                isAuth: true, //自定义是否需要检查school=atguigu
                title: '关于',
            }
        },
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            meta: {
                title: '主页',
            },
            children: [ //在Home组件内配置子路由（二级路由）
                {
                    name: 'xinwen',
                    path: 'news', //子路由不需要再加/，vue遍历路由时会自动拼接
                    component: News,
                    meta: {
                        isAuth: true, //需要校验school=atguigu
                        title: '新闻',
                    },
                    /*
                    beforeEnter: (to, from, next)=>{ //独享路由守卫（只有前置没有后置），当路由进入该组件之前，执行beforeEnter方法，内部逻辑写法和全局路由守卫一样
                        console.log('独享前置路由守卫', to, from)
                        //当localstorage中的school=atguigu时才允许访问news和message
                        //if (to.name === 'xinwen' || to.name === 'xiaoxi') { //这里可以用to.name或to.path判断，这么写比较麻烦
                        if (to.meta.isAuth) { //通过meta自定义属性简化写法    
                            if (localStorage.getItem('school') === 'atguigu') {
                                next()
                            } else{
                                alert('学校名不对，无权限查看！')
                            }
                        } else{
                             next()
                        }
                    }
                    */
                },
                {
                    name: 'xiaoxi',
                    path: 'message',
                    component: Message,
                    meta: {
                        isAuth: true, //需要校验school=atguigu
                        title: '消息',
                    },
                    children: [ //配置三级路由
                        {
                            name: 'xiangqing', //给多级路由起名字一般能简化跳转时的路径写法
                            path: 'detail', //:xxx占位符用于指定params参数（restful参数），不是多级路由
                            component: Detail,
                            meta: {
                                isAuth: true, //需要校验school=atguigu
                                title: '详情',
                            },
                            //props配置用于指定路由接收参数的形式
                            //1.第一种写法，值为对象；会将对象中所有kv以props形式传递给Detail组件；这种写法不常用，因为只能传递固定数据
                            // props: {a: 1, b: 'hello'},
                            
                            //2.第二种写法，值为布尔；如果为true，就会把路由组件收到的所有params参数以props形式传递给Detail组件;但这种写法不支持query参数
                            //props: true,
                            
                            //3.第三种写法，值为函数；这是一个路由回调函数，vue会将$route作为参数传入，函数返回一个对象，vue会将对象中所有kv以props形式传递给Detail组件
                            props($route) {
                                return {
                                    id: $route.query.id,  //这种写法支持query和params
                                    title: $route.query.title,
                                }
                            }
                        }
                    ]
                }
            ]
        },
    ]
})

//创建全局前置路由守卫
/*
每次路由切换之前（包括初始化时）路由器会调用beforeEach方法
to为将要跳转去的路由信息
from为来自的路由信息
next是一个函数，如果调用next()表示放行这次路由切换，不调用next()表示拦截这次路由切换
*/
/*
router.beforeEach((to, from, next)=>{
    console.log('全局前置路由守卫', to, from)
    //当localstorage中的school=atguigu时才允许访问news和message
    //if (to.name === 'xinwen' || to.name === 'xiaoxi') { //这里可以用to.name或to.path判断，这么写比较麻烦
    if (to.meta.isAuth) { //通过meta自定义属性简化写法    
        if (localStorage.getItem('school') === 'atguigu') {
            next()
        } else{
            alert('学校名不对，无权限查看！')
        }
    } else{
         next()
    }
})
*/

//创建全局后置路由守卫
/*
每次路由切换完成路由器会调用beforeEach方法
to为将要跳转去的路由信息，和前置路由守卫一样
from为来自的路由信息，和前置路由守卫一样
后置路由守卫没有next方法，不能控制拦截或放行
*/

/*
router.afterEach((to, from)=>{
    console.log('全局后置路由守卫')
    //后置路由守卫使用较少，一般终于执行一些交互上的后置处理，这里让浏览器标题随着路由组件的meta.title变化
    document.title = to.meta.title || '硅谷系统'
})
*/

export default router